<template>
    <div>
        <el-button
            :type="buttonType"
            size="mini"
            :icon="buttonIcon"
            plain
            @click="onClickButton"
            class="column__tool__buttom"
        >{{buttonTitle}}&nbsp;</el-button>
    </div>  
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters } from 'vuex'
import { computed } from 'vue'

import { updateStatusApi } from '@/manager-core/api/table/table'
import { ElMessage,ElMessageBox } from 'element-plus'  



export default defineComponent({
  name: 'StatusButton',
  components: {    
  },
  props:{
    type :{
      type : Number,
      default : 0 , // 0 启用， 1 关闭 ， 2 删除
    },

    // 内容唯一id
    id:{
      required: true
    },

    // 显示标题
    title :{
      type: String,
      required: true      
    },

    // 服务器地址
    serverUrl:{
      type: String,
      required: true  
    }

  },
  

  data(){
    return {
      loading: false,
    }
  },

  methods:{
    init(){
    },

    // 点击了收起按钮
    onClickButton(){
      if(!this.title){
        ElMessage.error("未配置标题!")
        return;
      }

      let message = "确定要" + this.buttonTitle + ": " + this.title + " ?";
      let title = "请确认";

      ElMessageBox
        .confirm(message,title,{
            cancelButtonText : "取消",
            confirmButtonText : "确定"   
        })
        .then(()=>{

          if(this.loading){
            return;
          }
          this.loading = true;

          updateStatusApi(this.serverUrl,this.id,this.statusVal)
            .then((r)=>{
                ElMessage.success("操作成功");
                this.$emit("onSuccess",r);
            })
            .finally(()=>{
              this.loading = false;
            })
   
        })
        .catch(()=>{

        })
    },

    // 点击了菜单项
    onSelectMenuItem(index:any, indexPath:any){

      console.log("onSelectMenuItem",index)

      this.$router.push({
        path: index
      })
      // console.log("index",index,"indexpath",indexPath)

    },

    forget(){
      console.log("forget")
    }
  },

  computed:{
    buttonTitle(){
      if(this.type == 0){
        return "启用"
      }

      if(this.type == 1){
        return "停止"
      }

      if(this.type == 2){
        return "删除"
      }

      return "未定义"
    },
    buttonType(){
      if(this.type == 0){
        return "success"
      }

      if(this.type == 1){
        return "warning"
      }

      if(this.type == 2){
        return "danger"
      }

      return "info"
    },

    statusVal(){
      if(this.type == 0){
        return 0
      }

      if(this.type == 1){
        return 1
      }

      if(this.type == 2){
        return 2
      }
    },

    buttonIcon(){
      if(this.type == 0){
        return "el-icon-refresh-left"
      }

      if(this.type == 1){
        return "el-icon-circle-close"
      }

      if(this.type == 2){
        return ""
      }
    }
  },

  mounted(){
  },

  setup(){    

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

.btn-box{
  width: 100%;
}

</style>
